$(document).ready(function(){
    var s1 = [200, 600, 700, 1000];
    var s2 = [460, 210, 690, 820];
    var s3 = [260, 440, 320, 200];
    // Can specify a custom tick Array.
    // Ticks should match up one for each y value (category) in the series.
    var ticks = ['May', 'June', 'July', 'August'];
     
    var plot1 = $.jqplot('vertical-bar-div', [s1, s2, s3], {
		seriesColors: [ "#a55757", "#9b8250", "#85934b" ],  // colors that will
		// be assigned to the series.  If there are more series than colors, colors
		// will wrap around and start at the beginning again.
		
        // The "seriesDefaults" option is an options object that will
        // be applied to all series in the chart.
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: {
				fillToZero: true,
				barPadding: 0,      // number of pixels between adjacent bars in the same
									// group (same category or bin).
				barMargin: 10,      // number of pixels between adjacent groups of bars.
				barWidth: null,     // width of the bars.  null to calculate automatically.
				shadowOffset: 0,    // offset from the bar edge to stroke the shadow.
				shadowDepth: 3,     // nuber of strokes to make for the shadow.
				shadowAlpha: 0.6,   // transparency of the shadow.
			}
        },
        // Custom labels for the series are specified with the "label"
        // option on the series option.  Here a series option object
        // is specified for each series.
        series:[
            {label:'One'},
            {label:'Two'},
            {label:'Three'}
        ],
		grid: {
			borderWidth: 0,
			gridLineColor: '#cdcdcd',    // *Color of the grid lines.
			background: '#f9f9f9',      // CSS color spec for background color of grid.
			shadow: false
		},
        // Show the legend and put it outside the grid, but inside the
        // plot container, shrinking the grid to accomodate the legend.
        // A value of "outside" would not shrink the grid and allow
        // the legend to overflow the container.
        legend: {
            show: true,
            placement: 'insideGrid',
			location: 'nw'
        },
        axes: {
            // Use a category axis on the x axis and use our custom ticks.
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks
            },
            // Pad the y axis just a little so bars can get close to, but
            // not touch, the grid boundaries.  1.2 is the default padding.
            yaxis: {
                pad: 1.05,
                tickOptions: {formatString: '$%d'}
            }
        }
    });
});